<script setup>
import { useLsyLayoutStore } from '@/store/LsyLayoutStore.js'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
function onClick() {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}

const systemLayoutStore = useLsyLayoutStore()
const { toggleExpandSidePanel, changeLayoutType } = systemLayoutStore
const { expandSidePanel } = storeToRefs(systemLayoutStore)
</script>
<template>
  <ContentContainer>
    <el-card shadow="never">
      <div>
        <h3>test</h3>
        <h3>{{ expandSidePanel }}</h3>
        <el-button type="primary" @click="onClick">按钮</el-button>
        <el-button @click="toggleExpandSidePanel">侧边面板展开/收缩</el-button>
      </div>
      <div>
        <el-button @click="() => changeLayoutType('Left-Top-Bottom')">
          左上下布局
        </el-button>
        <el-button @click="() => changeLayoutType('Top-Bottom')">
          上下布局
        </el-button>
        <el-button @click="() => changeLayoutType('Top-Left-Right')">
          上左右布局
        </el-button>
      </div>
      <SvgIcon name="vue"></SvgIcon>

      <h1>最后一行</h1>
    </el-card>
  </ContentContainer>
</template>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
